<template>
  <div class="page-edit">
    <a-form
      ref="formRef"
      :model="formState"
      :rules="formRules"
      :labelCol="{ style: { width: '80px' } }"
      :colon="false"
      labelAlign="right"
    >
      <div class="page-edit-common">
        <p class="page-edit-common-title">基础信息</p>
        <a-form-item label="站点名称" name="site_name">
          <a-input
            v-model:value.trim="formState.site_name"
            :maxlength="30"
            placeholder="请输入站点名称"
            class="w-[359px]"
          />
        </a-form-item>
        <a-form-item label="站点类型" name="site_type">
          <a-select
            v-model:value="formState.site_type"
            :disabled="siteId ? true : false"
            placeholder="请选择站点类型"
            class="w-[359px]"
            :getPopupContainer="(triggerNode: any) => triggerNode.parentNode"
          >
            <a-select-option :value="1">种源资源</a-select-option>
            <a-select-option :value="2">外部资源</a-select-option>
          </a-select>
          <div class="source-introduce mt-[8px]">
            种源资源：主要为采集种源系统的资源；外部资源：第三方资源，影片地址包含域名；
          </div>
        </a-form-item>
      </div>
      <div class="page-edit-common min-h-[188px]">
        <p class="page-edit-common-title">站点icon</p>
        <a-form-item label="icon图片">
          <div>
            <a-radio-group v-model:value="formState.site_icon_type" @change="handleTypeChange">
              <a-radio :value="1">文件</a-radio>
              <a-radio :value="2" class="ml-[82px]">URL</a-radio>
            </a-radio-group>
            <div>
              <div class="flex items-center">
                <UploadImage
                  v-if="formState.site_icon_type === 1"
                  fileType="0"
                  imgType="0"
                  fileUrl="v1/common/upload"
                  @getImageInfo="getImageInfo"
                >
                  <a-input-search
                    v-model:value="formState.site_icon"
                    enter-button="上传文件"
                    @search="onSearch"
                    readOnly
                    class="w-[359px]"
                  />
                </UploadImage>
                <a-input
                  v-else
                  v-model:value="formState.site_icon"
                  placeholder="请输入URL地址"
                  class="w-[359px]"
                  @blur="handleBlur"
                />
                <a-tooltip placement="right" class="ml-[16px]" color="#fff" v-if="previewImage">
                  <template #title>
                    <img
                      alt="example"
                      class="max-w-[300px] max-h-[300px] w-[-webkit-fill-available]"
                      :src="previewImage"
                    />
                  </template>
                  <a href="javascript:;"> <fund-view-outlined class="icon-preview text-[18px]" /> 预览 </a>
                </a-tooltip>
              </div>
              <div class="source-introduce mt-[8px]">
                {{ storage.get('img_type') ? '支持' + storage.get('img_type') + '素材，' : '支持所有素材,' }}
                {{ storage.get('img_size') + '以内' || '' }}；建议尺寸800*600px
              </div>
            </div>
          </div>
        </a-form-item>
      </div>
      <div class="page-edit-common">
        <p class="page-edit-common-title">站点简介</p>
        <a-form-item label="简介内容" name="site_introduction">
          <a-textarea
            v-model:value="formState.site_introduction"
            :maxlength="1000"
            show-count
            placeholder="请输入站点简介"
            :rows="5"
            class="w-[600px] mt-[5px]"
          />
        </a-form-item>
        <a-form-item label="状态" name="status" class="page-edit-common-form-item">
          <a-radio-group v-model:value="formState.site_status">
            <a-radio :value="1">启用</a-radio>
            <a-radio :value="2" class="ml-[90px]">禁用</a-radio>
          </a-radio-group>
        </a-form-item>
      </div>
    </a-form>
    <div class="page-edit-button">
      <a-button type="primary" @click="saveSite">保存站点</a-button>
      <a-button @click="() => $router.back()">返回</a-button>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, inject } from 'vue'
import UploadImage from '@/components/components/upload-image/UploadImage.vue'

import { useRouter } from 'vue-router'
import apis from '@/apis'
import { message } from 'ant-design-vue'
import { storage } from '@/utils/storage'
const {
  site: { add, update, detail }
} = apis
const baseUrl: any = inject('baseUrl')
const router = useRouter()
const formRef = ref()
const previewImage = ref()
interface IFormState {
  site_name: string
  site_type: number | undefined
  site_icon: string
  site_icon_type: number
  site_introduction: string
  site_status: number
  site_id?: string | undefined
  site_order?: string
}
const formState = reactive<IFormState>({
  site_name: '',
  site_type: undefined,
  site_icon_type: 1,
  site_icon: '',
  site_introduction: '',
  site_status: 1
})
const formRules = reactive({
  site_name: [{ required: true, message: '请输入站点名称' }],
  site_type: [{ required: true, message: '请选择站点类型' }]
})

const siteId = ref()
const saveSite = () => {
  formRef.value
    .validate()
    .then(() => {
      if (!siteId.value) {
        console.log(formState, 'formState')
        add(formState).then((res: any) => {
          message.success('添加成功')
          router.back()
        })
      } else {
        formState.site_id = siteId.value
        update(formState).then((res: any) => {
          message.success('编辑成功')
          router.back()
        })
      }
    })
    .catch((err: any) => {
      console.log(err, ':err')
    })
}
//输入框失焦事件
const handleBlur = (e: any) => {
  previewImage.value = e.target.value
}
//图文类型切换事件
const handleTypeChange = (e: any) => {
  console.log('e: ', e)
  formState.site_icon = ''
  previewImage.value = ''
}
const onSearch = (searchValue: string) => {
  console.log('use value', searchValue)
}
const getImageInfo = (value: any) => {
  console.log('value: ', value)
  formState.site_icon = value
  if (formState.site_icon_type === 1) return (previewImage.value = baseUrl + value)
  previewImage.value = value
}
const getAdDetail = () => {
  detail({ site_id: siteId.value }).then((res: any) => {
    console.log(res, '站点详情')
    Object.assign(formState, res)
    if (formState.site_icon) {
      if (formState.site_icon_type === 1) {
        previewImage.value = baseUrl + formState.site_icon
      } else {
        previewImage.value = formState.site_icon
      }
    } else {
      formState.site_icon = ''
    }
  })
}
onMounted(() => {
  // console.log(router.currentRoute.value.query, 'query')
  siteId.value = router.currentRoute.value.query.id
  if (!siteId.value) return false
  getAdDetail()
})
</script>

<style lang="less" scoped>
.page-edit {
  width: 1200px;

  .ant-form {
    .page-edit-common {
      min-height: 205px;
      padding-top: 20px;
      box-sizing: border-box;
      border-bottom: 1px solid #f0f0f0;

      &-title {
        font-size: 16px;
        color: #262626;
        letter-spacing: 1.14px;
        font-weight: 500;
        margin: 0 0 24px 0;
      }

      .source-introduce {
        margin-top: 8px;
        font-size: 12px;
        color: #bfbfbf;
      }

      :deep(.ant-radio-group) {
        margin: 5px 0 13px;
      }
    }
  }

  &-button {
    margin-top: 24px;
    display: flex;

    button:nth-child(1) {
      margin-right: 16px;
    }
  }
}
</style>
